<template>
	<view class="min-card">
		<view class="item"  @click="reservation">
			<view class="cri color1">
				<icon class="ic-request iconfont bs-request" type=""></icon>
			</view>
			<text>预约设备</text>
		</view>
		<view class="item" @click="goRecommend">
			<view class="cri color2">
				<icon class="ic-tuijian iconfont bs-tuijian" type=""></icon>
			</view>
			<text>自动推荐</text>
		</view>
		<view class="item" @click="goHistory">
			<view class="cri color3">
				<icon class="ic-history iconfont bs-history" type=""></icon>
			</view>
			<text>预约历史</text>
		</view>
		<view class="item" @click="goMy">
			<view class="cri color4">
				<icon class="ic-my iconfont bs-my" type=""></icon>
			</view>
			<text>个人信息</text>
		</view>
	</view>

</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const emit = defineEmits(['reservation','goMy','goHistory','goRecommend'])
	
	function reservation() {
		emit('reservation')
	}
	
	function goMy() {
		emit('goMy')
	}

	function goHistory() {
		emit('goHistory')
	}

	function goRecommend() {
		emit('goRecommend')
	}
</script>

<style lang="scss" scoped>
	@import "/static/css/iconfont.css";

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.min-card {
		transform: translateY(-35%);
		width: 92%;
		height: 90px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 15px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		animation: fadeIn 0.8s ease-out;

		.item {
			width: 25%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: transform 0.3s ease;

			&:active {
				transform: translateY(-3px);
			}

			.cri {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 3px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(1.05);
					box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
				}
			}

			.color1 {
				background: linear-gradient(135deg, #e9f0fe, #c5d8ff);
			}

			.color2 {
				background: linear-gradient(135deg, #e3fbff, #c5f2ff);
			}

			.color3 {
				background: linear-gradient(135deg, #eef0ff, #d5d9ff);
			}

			.color4 {
				background: linear-gradient(135deg, #dbffff, #c5ffff);
			}

			.ic-request {
				font-size: 30px;
				color: #3b83f7;
			}

			.ic-tuijian {
				font-size: 30px;
				color: #42d3ea;
			}

			.ic-history {
				font-size: 30px;
				color: #707bee;
			}

			.ic-my {
				font-size: 30px;
				color: #48d3cf;
			}


			text {
				font-size: 12px;
				font-weight: 600;
				color: #333;
				margin-top: 5px;
			}
		}
	}
</style>